<template>
  <div>
    <!-- 普通使用方式 -->
    <image-wrapper :src="imageSrc" :desc="context"></image-wrapper>

    <!-- 使用 slot 的 desc 方式 -->
    <image-wrapper :src="imageSrc">
      <span slot="desc">{{ context }}</span>
    </image-wrapper>

    <a-button @click="queryUser">queryUser</a-button>
    <a-table :dataSource="list"></a-table>

    <quill-editor
      ref="myTextEditor"
      v-model="content"
      :config="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
    ></quill-editor>
  </div>
</template>


<script>
import ImageWrapper from '@/components/ImageWrapper' // @ 表示相对于源文件根目录
import { getUser, getUsers } from '@/api/user'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

export default {
  // 引入组件
  components: {
    ImageWrapper,
    quillEditor
  },

  data() {
    return {
      context: '示意图',
      imageSrc: 'https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png',
      id: 0,
      queryParam: {
        pageSize: 10,
        pageNo: 1,
        username: ''
      },
      info: {},
      list: [],
      content: '<h2>I am Example</h2>',
      editorOption: {
        // something config
      }
    }
  },
  methods: {
    queryUser() {
      const { $message } = this
      getUser(this.id)
        .then(res => {
          this.info = res.data
        })
        .catch(err => {
          $message.error(`load user err: ${err.message}`)
        })
    },
    queryUsers() {
      getUsers(this.queryParam).then(res => {
        this.list = res
      })
    },
     onEditorBlur(editor) {
      console.log('editor blur!', editor)
    },
    onEditorFocus(editor) {
      console.log('editor focus!', editor)
    },
    onEditorReady(editor) {
      console.log('editor ready!', editor)
    },
    onEditorChange({ editor, html, text }) {
      // console.log('editor change!', editor, html, text)
      this.content = html
    }
  },// 如果你需要得到当前的editor对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的editor对象，实际上这里的$refs对应的是当前组件内所有关联了ref属性的组件元素对象
  computed: {
    editor() {
      return this.$refs.myTextEditor.quillEditor
    }
  },
  mounted() {
    // you can use current editor object to do something(editor methods)
    console.log('this is my editor', this.editor)
    // this.editor to do something...
  }
}
</script>